@StandardColor: rgb(5, 154, 139);
@AuxiliaryColor: rgb(255, 174, 0);

@font-face {
    font-family: "阿里妈妈数黑体";
    src: url("//at.alicdn.com/wf/webfont/JOY8ZvFbcRzq/AnuhTvcxwbCZ.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/JOY8ZvFbcRzq/x8BARdyqkOis.woff") format("woff");
}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: "阿里巴巴普惠体";
    font-weight: 250;
    src: url("//at.alicdn.com/wf/webfont/JOY8ZvFbcRzq/6P61dmnlozYx.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/JOY8ZvFbcRzq/8RAOFUcPfIXN.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot?t=1723525308896');
    /* IE9 */
    src: url('iconfont.eot?t=1723525308896#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
        url('iconfont.woff?t=1723525308896') format('woff'),
        url('iconfont.ttf?t=1723525308896') format('truetype'),
        url('iconfont.svg?t=1723525308896#iconfont') format('svg');
}

#container {
    width: 100vw;
    height: 100vh;
}

.three {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999;
    background-color: aliceblue;
}

.css2d,
.css3d {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    pointer-events: none;
}

#layers {
    position: fixed;
    z-index: 1;
    background-color: #ffffff82;
    bottom: 20px;
    right: 20px;

    .layer-title {
        color: #fff;
        font-size: 12px;
        padding-left: 8px;
        background: linear-gradient(to right, rgb(60, 45, 13), rgba(255, 174, 0, 0.1));
    }

    li {
        width: 120px;
        height: 24x;
        display: flex;
        justify-content: space-between;
        color: @StandardColor ;
        cursor: pointer;
        line-height: 24px;
        padding: 0 12px;
        font-size: 12px;
        // border-bottom: 1px solid @AuxiliaryColor;

        &>div {
            pointer-events: none;
        }

        &:hover {
            background-color: @StandardColor !important;
            color: #fff !important;
        }

        &.checked {
            color: @StandardColor ;
        }
    }
}

.distance-label {
    color: #fff;
    padding: 2px 4px;
    background-color: @StandardColor ;
    font-size: 12px;
    pointer-events: auto;
    cursor: pointer;
}

.title {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .8);
    height: 58px;
    font-family: "阿里妈妈数黑体";
    font-weight: 300;
    letter-spacing: 20px;
    background: linear-gradient(to bottom, rgb(79, 99, 93) 0%, rgba(96, 105, 102, 0) 80% 100%);

    .center-title {
        font-size: 28px;
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        top: 0;
        width: 100%;
        font-weight: 500;

        .main-title {
            height: 68px;
            // border-bottom: 1px solid rgba(255, 255, 255, .8);
            padding: 0 20px;
            box-sizing: border-box;
            line-height: 68px;
        }

        div[class$="-menu"] {
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            width: 100px;
            font-weight: 500;
            cursor: pointer;
            text-align: center;

            &:hover {
                color: @StandardColor ;
                border-bottom: 2px solid @StandardColor;
                text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.8);
            }
        }
    }
}

.device-tag {
    width: 18px;
    height: 18px;
    background-color: rgba(255, 255, 255, .6);
    color: @StandardColor;
    border: 2px solid @StandardColor;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    pointer-events: auto;
}

#direction-dial {
    position: absolute;
    right: 260px;
    bottom: 25px;
    border: 2px solid @StandardColor;
    background-color: rgba(255, 255, 255, .4);
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 100%;

    // 中心点
    .point {
        position: absolute;
        width: 8px;
        height: 8px;
        background-color: @StandardColor;
        border-radius: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .needle {
        width: 100%;
        height: 2px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        justify-content: flex-end;

        div.bar {
            width: 50%;
            height: 100%;
            background-color: @StandardColor;
            position: relative;

            div.move-point {
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                left: 50%;
                width: 8px;
                height: 8px;
                background-color: @AuxiliaryColor;
                border-radius: 100%;

                .column-bar {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 8px;
                    height: 50px;
                    width: 3px;
                    margin: auto;
                    background-color: @StandardColor;
                }
            }
        }
    }
}


.numberList {
    pointer-events: none;
    user-select: none;
    width: 100%;
    position: absolute;
    top: 80px;
    display: flex;
    justify-content: center;
    gap: 40px;

    .number-item {
        .top-number {
            color: #fff;
            display: flex;
            align-items: flex-end;

            .count {
                font-size: 32px;
                font-weight: 900;
            }

            .unit {
                font-size: 14px;
                margin-left: 12px;

            }

        }

        .number-title {
            font-size: 12px;
            background: #23302d;
            color: #fff;
            padding: 2px 0px 2px 16px;
            background: linear-gradient(to right, rgb(60, 45, 13), rgba(255, 174, 0, 0.1));
            position: relative;

            &::after {
                content: "";
                display: block;
                height: 100%;
                width: 4px;
                position: absolute;
                left: 0;
                top: 0;
                background-color: @AuxiliaryColor;
            }
        }
    }
}

.loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 11;
    background-color: rgb(203, 255, 250);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .desc {
        text-align: center;
        color: @AuxiliaryColor;
        margin-top: 40px;
    }
}

.handle-desc {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    color: #a0a0a0;
    font-size: 12px;

    span {
        color: @AuxiliaryColor;
    }
}

.charts {
    position: absolute;
    left: 20px;
    top: 80px;
    z-index: 10;
    height: calc(100vh - 160px);
    font-family: 阿里巴巴普惠体;

    &>div:nth-of-type(2) {
        margin-top: 20px;
    }

    &>div:nth-of-type(3) {
        margin-top: 20px;
    }

    &-title {
        color: #fff;
        width: 280px;
        position: relative;

        .bar {
            position: absolute;
            bottom: -8px;
            left: 0;
            height: 3px;
            background-color: #ffffff8e;
            width: 260px;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                height: 100%;
                width: 28px;
                background-color: #fff;
            }

            &::before {
                content: "";
                height: 100%;
                width: 16px;
                position: absolute;
                right: -20px;
                top: 0;
                background-color: @StandardColor;
            }
        }
    }

    .charts-main {
        display: flex;
        flex-wrap: wrap;
        width: 280px;
        height: 160px;
        gap: 8px;
        margin-top: 24px;
        margin-bottom: 24px;
        background-color: #23302d8f;
        padding: 8px;
        align-items: center;
        justify-content: space-between;

        &>div {
            width: calc(50% - 16px);
            height: calc(50% - 16px);
            display: flex;
            color: #fff;

            &>div:nth-of-type(1) {
                width: 42px;
                height: 42px;
                border-radius: 100%;
                border: 1px solid @StandardColor;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 8px;
            }

            .iconfont {
                font-size: 24px;
            }
        }
    }

    .pie-chart-main {
        height: 160px;
        background-color: #23302d8f;
        margin-top: 16px;

        #pie-chart {
            height: 100%;
        }
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    ul.alert-info {
        width: 296px;
        background-color: #23302d8f;
        height: 160px;
        margin-top: 16px;
        padding: 12px 0;

        li {
            width: 100%;
            height: 24px;
            display: flex;
            gap: 4px;
            color: #fff;
            font-size: 12px;
            align-items: center;
            justify-content: space-around;
            padding: 0 12px;
            box-sizing: border-box;

            &>div {
                width: 20%;
            }

            &:nth-of-type(2n-1) {
                background-color: #5165719a;
            }

        }
    }
}

.form {
    width: 130px;
    height: 140px;
    background: #7777776c;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 120px;
    right: 10px;
    z-index: 9;
    padding: 6px 4px;
    input {
        width: 120px
    }
}